<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('表单向导')" />
    <th:block th:include="include :: jquery-smartwizard-css" />
    <style type="text/css">
        .select-table table{
            table-layout:fixed;
        }

        .table>thead>tr>th{
            text-align:center;
        }

        .select-table .table td{
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

        .form-control{
            padding:3px 6px 4px;
            height:30px;
        }

        .icheckbox-blue{
            top:0px;
            left:6px;
        }

        .form-control.select2-hidden-accessible{
            position:static!important;
        }

        .select-table table label.error{
            position: inherit;
        }

        select + label.error{
            z-index:1;
            right:40px
        }
        /* 如果设置了是否自动调节高度为false,需要加滚动条 */
        .sw>.tab-content{
            overflow-x: hidden;
            overflow-y: auto;
        }
        /* 解决工具栏无法固定底部的问题（如果页面没有animated类可以不写这部分代码） */
        /*.animated {*/
        /*    animation-fill-mode: none;*/
        /*    -webkit-animation-fill-mode: none;*/
        /*    -moz-animation-fill-mode: none;*/
        /*    -o-animation-fill-mode: none;*/
        /*}*/
        /* ul增加滚动条*/
        .ibox>.ibox-ul>ul{
            overflow-x: hidden;
            overflow-y: auto;
        }

        ul.wa-list li.current {
            background: #00A2E920;
        }

        i.check{
            color: #00a65a80;
        }
        i.uncheck{
            color: #8095a860;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-content">
                    <div class="row select-list" style="padding-left: 15px; margin-bottom: 10px">
                        <ul>
                            <li>
                                <div class="btn-group-sm" role="group">
                                    <a class="btn btn-danger" id="close-btn" onclick="closeItem()"><i class="fa fa-reply-all"></i> 关闭 </a>
                                    <a class="btn btn-info" id="prev-btn"><i class="fa fa-chevron-left"></i> 上一步 </a>
                                    <a class="btn btn-success" id="next-btn"><i class="fa fa-chevron-right"></i> 下一步 </a>
                                    <a class="btn btn-danger" id="reset-btn"><i class="fa fa-refresh"></i> 重置 </a>
                                    <a class="btn btn-primary" id="finish-btn" onclick="submit()"><i class="fa fa-paper-plane"></i> 完成 </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="smartwizard">
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#step-1">Step 1: Select Services</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-2">Step 2: Add Sample</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-3">Step 3: Select Project</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-4">Step 4: Submit</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                                <div STYLE="height: 450px">
                                    <form class="form form-horizontal m-t">
                                        <!-- 选择服务和方法-->
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <div class="ibox">
                                                    <div class="ibox-content ibox-ul">
                                                        <h3>服务列表</h3>
                                                        <ul class="sortable-list connectList agile-list wa-list" id="service-ul" style="max-height: 450px">
                                                            <li th:each="service : ${services}" th:class="${serviceStat.first} ? 'current' : ''">
                                                                <div>
                                                                    <a href="javascript:;" class="pull-right btn btn-xs btn-white">details</a>
                                                                    <p style="font-size: 150%; font-weight: bold" th:text="${service.serName}"></p>
                                                                </div>
                                                                <p th:text="${service.serDes}"></p>
                                                                <label class="col-sm-4"><i class="fa fa-adjust"></i> 类型:</label>
                                                                <p th:text="${service.serviceType.svtypeName}"></p>
                                                                <label class="col-sm-4"><i class="fa fa-adjust"></i> 仪器:</label>
                                                                <p th:text="${service.instrument.instName}"></p>
                                                                <input type="hidden" th:value="${service.serId}">
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="ibox">
                                                    <div class="ibox-content ibox-ul">
                                                        <h3>方法列表</h3>
                                                        <ul class="sortable-list connectList agile-list" id="method-ul">
                                                            <li th:each="method : ${methods}" style="display: none">
                                                                <div>
                                                                    <a href="javascript:;" class="pull-right btn btn-primary btn-xs btn-outline" th:onclick="select([[${method}]])"> Select</a>
                                                                    <a href="javascript:;" class="pull-right btn btn-white btn-xs">details </a>
                                                                    <p style="font-size: 150%; font-weight: bold" th:text="${method.modName}"></p>
                                                                </div>
                                                                <p th:text="${method.modDes}"></p>
                                                                <label class="col-sm-4"><i class="fa fa-adjust"></i> 模板:</label>
                                                                <p th:text="${method.templateName}"></p>

                                                                <label class="col-sm-4"><i class="fa fa-adjust"></i> 参数:</label>
                                                                <p><a href="javascript:;" th:onclick="detail([[${method.modAcqupara}]])"><i class="fa fa-search"></i> </a></p>

                                                                <input type="hidden" th:value="${method.serId}">
                                                                <input type="hidden" th:value="${method.modId}">
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="ibox">
                                                    <div class="ibox-content ibox-ul">
                                                        <h3>已选择</h3>
                                                        <ul class="sortable-list connectList agile-list" id="select-ul">

                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                                <!-- Add Sample弹窗-->
                                <form class="form form-horizontal m-t">
                                <div class="row" style="height: 450px">
                                    <div class="col-sm-12">
                                        <!--<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#sampleModal"><i class="fa fa-plus"> 增加</i></button>-->
                                        <button type="button" class="btn btn-success btn-sm" onclick="addRow()"><i class="fa fa-plus"> 增加</i></button>
                                        <button type="button" class="btn btn-danger btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>
                                        <div class="col-sm-12 select-table table-striped">
                                            <table id="bootstrap-table2"></table>
                                        </div>
                                    </div>
                                </div>
                                </form>
                                <div class="modal inmodal fade" id="sampleModal" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                                </button>
                                                <h4 class="modal-title">Select Services</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form class="form-horizontal m" id="form-sample">
                                                    <ul class="col-sm-10 sortable-list connectList agile-list" id="select-ul-sam">

                                                    </ul>
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">溶剂：</label>
                                                        <div class="col-sm-4">
                                                            <select class="form-control" id="solvent">

                                                            </select>
                                                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 溶剂在方法中已被限定范围</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">是否优先：</label>
                                                        <div class="col-sm-4">
                                                            <label class="toggle-switch switch-solid">
                                                                <input type="checkbox" id="priority">
                                                                <span></span>
                                                            </label>
                                                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 休先实验需要对应权限</span>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>

                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                                <button id="saveSam" type="button" class="btn btn-primary">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                                <div >
                                    <form class="form form-horizontal m-t">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label is-required">Project：</label>
                                                    <div class="col-sm-8">
                                                        <input id="project" type="text" class="form-control" readonly required placeholder="请在下方表格勾选项目">
                                                        <input id="project-id" type="hidden" name="proId">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">Comment：</label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" name="comment">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="col-sm-12 select-table table-striped">
                                        <table id="bootstrap-table1"></table>
                                    </div>
                                </div>

                            </div>
                            <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                                <!-- 展示-->
                                <div>
                                    <form class="form form-horizontal m-t">
                                        <div class="row">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label is-required">请求名称：</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" name="reqName" maxlength="32">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">描述：</label>
                                                <div class="col-sm-6">
                                                    <textarea name="reqDes" maxlength="500" class="form-control" rows="3"></textarea>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">添加到收藏夹：</label>
                                                <div class="col-sm-6">
                                                    <label class="toggle-switch switch-solid">
                                                        <input type="checkbox" id="favourite">
                                                        <span></span>
                                                    </label>
                                                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 可直接通过收藏夹快速创建服务申请</span>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-smartwizard-js" />
<script th:inline="javascript">

    var proStatusDatas = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "system/request2";

    $(function() {
        var options = {
            id: "bootstrap-table1",
            url: prefix + "/prolist",
            onCheck: onCheck,
            onUncheck: onUncheck,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: true,
            singleSelect : true,
            columns: [{
                checkbox: true
            },
                {
                    field: 'proId',
                    title: '主键',
                    visible: false
                },
                {
                    field: 'proName',
                    title: '名称'
                },
                {
                    field: 'proDes',
                    title: '描述'
                },
                {
                    field: 'proStatus',
                    title: '状态',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(proStatusDatas, value);
                    }
                },
                {
                    field: 'startTime',
                    title: '开始日期'
                },
                {
                    field: 'endTime',
                    title: '结束日期'
                },
                {
                    field: 'createBy',
                    title: '创建者'
                }]
        };
        $.table.init(options);
    });

    $(function() {
        // 初始化数据, 可以由后台传过来
        var data = [
            {
                sampleId: "100",
                samName: "",
                samSlot: "1",
                samDes: "",
                quantity: "50.5",
                mFormula: "C3H7NO2",
                mWeight: "89.0932",
                services: "",
            }];
        var options = {
            data: data,
            id: "bootstrap-table2",
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        var columnId = $.common.sprintf("<input type='hidden' name='samples[%s].sampleId' value='%s'>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + columnId;
                    }
                },
                {
                    field: 'samName',
                    align: 'center',
                    title: '样品名称<span style="color: red">*</span>',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control sampleName' type='text' name='samples[%s].samName' value='%s' required>", index, value);
                        return html;
                    }
                },
                {
                    field: 'samDes',
                    align: 'center',
                    title: '描述',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='samples[%s].samDes' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'quantity',
                    align: 'center',
                    title: '样品量',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='samples[%s].quantity' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'samSlot',
                    align: 'center',
                    title: 'slot<span style="color: red">*</span>',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control position' type='number' min='1' max='999' name='samples[%s].samSlot' value='%s' required>", index, value);
                        return html;
                    }
                },
                {
                    field: 'mFormula',
                    align: 'center',
                    title: '分子式',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='samples[%s].mFormula' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'mWeight',
                    align: 'center',
                    title: '分子量',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='samples[%s].mWeight' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'services',
                    align: 'center',
                    title: '服务<span style="color: red">*</span>',
                    width: 350,
                    formatter: function(value, row, index) {
                        //弹窗
                        var html = $.common.sprintf("<input type='text' onfocus='$(this).blur()' id='input-select%s' class='form-control select2-multiple' onclick='selectServices(%s)' value='%s' required>",index, index, value);
                        var hiddenHtml1 = $.common.sprintf("<input type='text' hidden='hidden' id='input-h1-select%s' name='samples[%s].modIds' value=''>",index,index);
                        var hiddenHtml2 = $.common.sprintf("<input type='text' hidden='hidden' id='input-h2-select%s' name='samples[%s].solvent' value=''>",index,index);
                        var hiddenHtml3 = $.common.sprintf("<input type='text' hidden='hidden' id='input-h3-select%s' name='samples[%s].priority' value=''>",index,index);
                        // return html ;
                        return html + hiddenHtml1 + hiddenHtml2 + hiddenHtml3;
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }]
        };
        $.table.init(options);
    });

    /* modal层无法选中的解决方案， 第二方案：将modal层放在body外*/
    $("#sampleModal").prependTo("body");

    $(document).ready(function() {
        // 初始化表单向导组件
        $('#smartwizard').smartWizard({
            theme: 'default', // default, arrows, dots, progress
            autoAdjustHeight : false, // 自动调整高度, 默认true
            enableURLhash: false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
            transition: {
                animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
            },
            toolbarSettings: {
                showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
            }
        });
    });

    function submit(){
        var data = {};
        $('.form').each(function (index, form){
            // 这里可以使用$.common.formToJSON(formId);  需要在form上加id
            $.each($(form).serializeArray(), function(i, field) {
                if(data[field.name]) {
                    data[field.name] += ("," + field.value);
                } else {
                    data[field.name] = field.value;
                }
            });
        });
        var favourite = $("input[id='favourite']").is(':checked') == true ? 'Y' : 'N';
        data.push({"name": "favourite", "value": favourite});
        // alert(JSON.stringify(data));
        $.operate.saveTab(prefix + "/add", data);
    }

    // 显示步骤时将触发事件
    $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
        // 下面按钮是快速操作栏的
        $("#prev-btn").removeClass('disabled');
        $("#next-btn").removeClass('disabled');
        $("#finish-btn").removeClass('disabled');
        if(stepPosition === 'first') {
            $("#prev-btn").addClass('disabled');
            $("#finish-btn").addClass('disabled');
        } else if(stepPosition === 'last') {
            $("#next-btn").addClass('disabled');
        } else {
            $("#prev-btn").removeClass('disabled');
            $("#next-btn").removeClass('disabled');
            $("#finish-btn").addClass('disabled');
        }
        if(stepNumber == 1){
            $("#select-ul-sam").empty();
            for (let selectServiceElement of selectService) {
                $("#select-ul-sam").append(selectServiceElement.getli())
            }
        }
    });

    // 该事件在离开某个步骤之前触发
    $("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
        if(stepDirection == 'forward'){
            var form = $("#step-" + (currentStepNumber + 1)).find('.form');
            if(form.length > 0){
                if(currentStepNumber == 0){
                    var length = $("#select-ul").children("li").length;
                    console.log(length);
                    if(length == 0){
                        $.modal.alertError("请至少选择一个服务和方法");
                    }
                    return length>0;
                }else if(currentStepNumber == 1){
                    return form.validate().form();
                }else {
                    return form.validate().form();
                }
            }
            return true;
        }
        return true;
    });
    /* 重置按钮点击事件*/
    $("#reset-btn").on("click", function() {
        // Reset wizard
        $('#smartwizard').smartWizard("reset");
        return true;
    });
    /* 上一步按钮点击事件*/
    $("#prev-btn").on("click", function() {
        // Navigate previous
        $('#smartwizard').smartWizard("prev");
        return true;
    });
    /* 下一步按钮点击事件*/
    $("#next-btn").on("click", function() {
        // Navigate next
        $('#smartwizard').smartWizard("next");
        return true;
    });

    /**
     * 选中事件
     */
    function onCheck(row, $element){
        $("#project").attr('value', row.proName);
        $("#project-id").attr('value', row.proId);
    }

    /**
     * 取消选中事件
     */
    function onUncheck(row, $element){
        $("#project").attr('value', "");
        $("#project-id").attr('value', "");
    }

    /* service 选中样式*/
    $("#service-ul").children("li").click(function() {
        $(this).siblings('li').removeClass('current');          // 删除其他兄弟元素的样式
        $(this).addClass('current');                            // 添加当前元素的样式
        //选中展示方法列表
        var serId = $(this).children("input").val();

        $("#method-ul").children("li").each(function () {
            var serId2 = $(this).children("input:first").val();
            if(serId2 == serId){
                $(this).show();
            }else {
                $(this).hide();
            }
        });
    })

    /**
     * 《已选择》 删除已选择事件
     * @param obj
     */
    function closeSer(obj){
        var modId = $(obj).siblings("input").val();
        removeByAttr(selectService, "modId", modId);
        $(obj).parent().remove();
    }

    /* 从数组中以特定属性删除*/
    function removeByAttr(array, attr, value) {
        for (var i = 0; i < array.length; i++) {
            if (array[i][attr] == value) {
                array.splice(i, 1);
                break;
            }
        }
    }

    /* 数组中获取特定属性值的对象*/
    function getObjByAttr(array, attr, value) {
        for (var i = 0; i < array.length; i++) {
            if (array[i][attr] == value) {
                return array[i];
            }
        }
    }

    /* 参数详细界面*/
    function detail(value) {
        var replace = value.replaceAll("|", "</br>");
        $.modal.alertSuccess(replace);
    }

    /* 已选择的Service对象*/
    var selectService = [];

    /* method选择方法*/
    function select(method){
        //是否重复提交
        var flag = false;
        //是否多选方法（一个服务只能选择一个方法）
        var isSelMod = false;
        var mod;
        $("#select-ul").children("li").each(function(){
            var modId = $(this).children("input:first").val();
            if(method.modId == modId){
                flag = true;
            }
            var serId = $(this).children("input:first").next().val();
            if(method.serId == serId){
                isSelMod = true;
                mod = $(this);
            }
        })
        if(flag){
            return;
        }
        if(isSelMod){
            mod.children("button").trigger("click");
        }
        var ps = [];
        var children = $("#service-ul").children(".current");
        var serName = children.find("p:eq(0)").text();
        var serDes = children.find("p:eq(1)").text();
        var svtypeName = children.find("p:eq(2)").text();
        var instName = children.find("p:eq(3)").text();
        ps.push('<button class="close" type="button" onclick="closeSer(this)">×</button>')
        ps.push('<div><p style="font-size: 150%; font-weight: bold">'+serName+'</p></div>')
        ps.push('<p>'+serDes+'</p>')
        ps.push('<label class="col-sm-4"><i class="fa fa-adjust"></i> 类型:</label><p>'+svtypeName+'</p>')
        ps.push('<label class="col-sm-4"><i class="fa fa-adjust"></i> 仪器:</label><p>'+instName+'</p>')
        ps.push('<label class="col-sm-4"><i class="fa fa-adjust"></i> 方法:</label><p>'+method.modName+'</p>')
        ps.push('<input type="hidden" value="'+method.modId+'">')
        ps.push('<input type="hidden" value="'+method.serId+'">')
        var li = '<li>'+ps.join("")+'</li>';

        $("#select-ul").append(li);
        var obj = {
            serId: method.serId,
            serName: serName,
            instName: instName,
            serDes: serDes,
            svtypeName: svtypeName,
            modId: method.modId,
            modName: method.modName,
            solvents: method.solvents,
            getli: function () {
                var ps = [];
                ps.push('<div><p style="font-size: 150%; font-weight: bold">'+serName+'</p></div>')
                ps.push('<p>'+serDes+'</p>')
                ps.push('<label class="col-sm-4"><i class="fa fa-adjust"></i> 类型:</label><p>'+svtypeName+'</p>')
                ps.push('<label class="col-sm-4"><i class="fa fa-adjust"></i> 仪器:</label><p>'+instName+'</p>')
                ps.push('<label class="col-sm-4"><i class="fa fa-adjust"></i> 方法:</label><p>'+method.modName+'</p>')
                ps.push('<input type="hidden" value="'+method.modId+'">')
                return '<div class="col-sm-2" style="text-align: center" onclick="checkSer(this)"><i class="uncheck fa fa-check fa-2x"></i></div><li class="col-sm-10">'+ps.join("")+'</li>';
            }
        }
        selectService.push(obj);
    }

    /* 样品选择服务点击事件*/
    function checkSer(obj) {
        if($(obj).children("i").hasClass('check')){
            $(obj).children("i").removeClass("check")
            $(obj).children("i").addClass("uncheck")
        }else {
            $(obj).children("i").removeClass("uncheck")
            $(obj).children("i").addClass("check")
        }
        // $(obj).children("i").removeClass("uncheck")
        // $(obj).children("i").addClass("check")
        // $(obj).siblings("div").children("i").removeClass("check");
        // $(obj).siblings("div").children("i").addClass("uncheck");

        var modId = $(obj).next().children("input").val();
        var length = $(obj).parent().find("i.check").length;
        var objByAttr = getObjByAttr(selectService,"modId", modId);
        // $(obj).parent().next().find("select").empty();
        // objByAttr.solvents.forEach(function(item) {
        //     $(obj).parent().next().find("select").append("<option value='"+item.solventName+"'>"+item.solventName+"</option>")
        // })
        if(length == 0){
            $(obj).parent().next().find("select").empty();
        }else if(length == 1){
            $(obj).parent().next().find("select").empty();
            objByAttr.solvents.forEach(function(item) {
                $(obj).parent().next().find("select").append("<option value='"+item.solventName+"'>"+item.solventName+"</option>")
            })
        }else if(length >= 2){
            $(obj).parent().next().find("select").children("option").each(function () {
                var text = $(this).text();
                var flag = true;
                objByAttr.solvents.forEach(function(item) {
                    if(item.solventName == text){
                        flag = false;
                    }
                })
                if(flag){
                    $(this).remove();
                }
            })
        }
    }

    function addRow() {
        //input = hidden 的值需重新赋值
        var count = $("#" + table.options.id).bootstrapTable('getData').length;
        var modIds = [];
        var solvent = [];
        var priority = [];
        if(count > 0){
            for (let i = 0; i < count; i++) {
                modIds[i] = $("#input-h1-select"+i).val();
                solvent[i] = $("#input-h2-select"+i).val();
                priority[i] = $("#input-h3-select"+i).val();
            }
        }
        var row = {
            index: $.table.serialNumber(count),
            samName: "",
            samSlot: "",
            samDes: "",
            quantity: "",
            mFormula: "",
            mWeight: "",
            services: "",
        }
        sub.addRow(row, "bootstrap-table2");
        if(count > 0){
            for (let i = 0; i < count; i++) {
                $("#input-h1-select"+i).attr("value", modIds[i]);
                $("#input-h2-select"+i).attr("value", solvent[i]);
                $("#input-h3-select"+i).attr("value", priority[i]);
            }
        }

    }

    var num ;
    function selectServices(index){
        $("#sampleModal").modal('show')
        num = index;
    }

    /* Add Sample 点击保存事件*/
    $("#saveSam").on("click",function () {
        var cl = $("#select-ul-sam").find("i.check").length;
        if(cl == 0){
            $.modal.alertError("未选择服务");
            return false;
        }
        if($.common.isEmpty(num)){
            return false;
        }
        //选择的服务
        var modIds = [];
        var serName = [];
        if(cl == 1){
            modIds.push($("#select-ul-sam").find("i.check").parent().next().children("input").val());
            serName.push($("#select-ul-sam").find("i.check").parent().next().find("p:first").text());
        }else {
            $("#select-ul-sam").find("i.check").each(function () {
                modIds.push($(this).parent().next().children("input").val());
                serName.push($(this).parent().next().find("p:first").text());
            })
        }
        var solvent = $("#solvent option:selected").val();
        var priority = $("input[id='priority']").is(':checked') == true ? 'Y' : 'N';
        $("#input-select"+num).attr("value", serName.join(", "));
        // $("#input-select"+num).attr("value", serName.join(", ") + ", " + modIds.join(", "));
        $("#input-h1-select"+num).attr("value", modIds.join(", "));
        $("#input-h2-select"+num).attr("value", solvent);
        $("#input-h3-select"+num).attr("value", priority);

        $("#sampleModal").modal('hide')
        //模态框内容重置
        $("#form-sample")[0].reset()
        $("#select-ul-sam").find("i").removeClass("check");
        $("#select-ul-sam").find("i").addClass("uncheck");
        $("#select-ul-sam").next().find("select").empty();
        return true;
    })

</script>
</body>
</html>
